﻿@model CommentListModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商品评论</title>

    <link rel="stylesheet" href="~/common/Threelinkage/layui/css/layui.css">

    <script src="~/common/js/jquery-1.9.1.min.js"></script>

    <style type="text/css">
        #goodHead {
            margin-left: 2%;
            line-height: 28px;
        }

        .pinglun {
            cursor: pointer;
        }

            .pinglun span {
                font-size: 200%;
                color: lightgray;
            }

        #goodName {
            font-size: 22px;
            letter-spacing: 2px;
        }
    </style>

    <script type="text/javascript" async>
        var ind=-1;
        var isClick=false;
        function dorank(level) {
            ind=level;
            isClick=true;
            $("#Level").val(level);
            $('#rattingError').hide();
        }
        function RatingMouseLeave(index) {
            Rating(ind);
            if (!isClick){
                $('.pinglun:eq('+(index-1)+') p').hide();
                $('.pinglun:eq(3) p').hide();
            }
        }
        function RatingMouseOver(index) {
            Rating(index);
        }
        function Rating(index) {
            for(var i=0; i<$('.pinglun span').length;i++){
                          var  span=$('.pinglun span')[i];
                          if  (i<index){
                              span.style.color="yellow";
                          }else{
                              span.style.color="lightgray";
                          }
                          $('.pinglun:eq('+i+') p').hide();
                       }
            $('.pinglun:eq('+(index-1)+') p').show();
        }
        $(function () {
            $('.pinglun p').css('display','none');
            $('#content').keydown(function () {
                var value=$('#content').val();
                if(value.length>1000){
                    return false;
                }
            }).change(function () {
                $('#sy').html($('#content').val().length);
                if($('#content').val().length>1000){
                   var value= $('#content').val();
                   if(value>1000){
                    $('#content').val(value.substring(0,1000));
                   }
                }
                $('#btn_Sub').focus();
            })
        })
    </script>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row layui-bg-cyan">
            <div class="layui-col-md3" id="goodHead">
                <h3>商品评分</h3>
            </div>
        </div>
        <br />
        <br />
        <div class="layui-row">
            <div class="layui-col-md8">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <img src="@(Model.GoodImgSrc.ImgSrc==null?null:"http://static.amortal.top/"+Model.GoodImgSrc.ImgSrc)" height="76px">
                    </div>
                    <div class="layui-col-md6"><span id="goodName">@Model.OrderRecord.GoodName</span></div>
                </div>
            </div>
        </div>
        <br />
        <div class="layui-row">
            <div class="layui-col-md3">
                <div class="layui-row">
                    <p class="layui-col-md-offset1">请直接点击相应的星级进行评分</p>
                </div>
            </div>
        </div>
        <br />
        <div class="layui-row">
            <div class="layui-col-md6">
                <div class="layui-row">
                    <ul class="layui-col-md-offset2">
                        <li class="layui-col-md2 pinglun" onclick="dorank(1)"
                            onmouseover="RatingMouseOver(1)" onmouseleave="RatingMouseLeave(1)">
                            <span class="layui-icon">&#xe658;</span>
                            <p>1分</p>
                            <p>很不满意</p>
                        </li>
                        <li class="layui-col-md2 pinglun" onclick="dorank(2)"
                            onmouseover="RatingMouseOver(2)" onmouseleave="RatingMouseLeave(2)">
                            <span class="layui-icon">&#xe658;</span>
                            <p>2分</p>
                            <p>不满意</p>
                        </li>
                        <li class="layui-col-md2 pinglun" onclick="dorank(3)"
                            onmouseover="RatingMouseOver(3)" onmouseleave="RatingMouseLeave(3)">
                            <span class="layui-icon">&#xe658;</span>
                            <p>3分</p>
                            <p>一般</p>
                        </li>
                        <li class="layui-col-md2 pinglun" onclick="dorank(4)"
                            onmouseover="RatingMouseOver(4)" onmouseleave="RatingMouseLeave(4)">
                            <span class="layui-icon">&#xe658;</span>
                            <p>4分</p>
                            <p>满意</p>
                        </li>
                        <li class="layui-col-md2 pinglun" onclick="dorank(5)"
                            onmouseover="RatingMouseOver(5)" onmouseleave="RatingMouseLeave(5)">
                            <span class="layui-icon">&#xe658;</span>
                            <p>5分</p>
                            <p>非常满意</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <br />
        <br />
        <br />
        <br />
        <div class="layui-row">
            <form action="#" id="ratFrom" class="layui-form">
                <input type="hidden" lay-verify="required|number" name="GoodId" value="@Model.OrderRecord.GoodId">
                <input type="hidden" lay-verify="required|number" name="OrderId" value="@Model.OrderRecord.OrderId">
                <input type="hidden" lay-verify="required|number" name="OrderRecordId" value="@Model.OrderRecord.Id">

                <input type="hidden" lay-verify="level|number" name="Level" id="Level" value="">
                <input type="hidden" name="CommentImg" id="CommentImg" value="">
                <!--上传图片-->
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>选择图片</legend>
                </fieldset>
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upLoadImg">上传图片</button>
                    <div class="layui-upload-list">
                        <img class="layui-upload-img" id="demo1" height="87px">
                        <p id="demoText"></p>
                    </div>
                </div>

                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">评论内容</label>
                    <div class="layui-input-block">
                        <textarea name="Content" id="Content" placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>

    <script src="~/common/Threelinkage/layui/layui.js"></script>

    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->


    <script type="text/javascript">
    //Demo
      layui.use(['form','layer'], function(){
          var form = layui.form;
          form.verify({
              level: function (value, item) { //value：表单的值、item：表单的DOM对象
                  if (value == '') {
                      return '请选择好评'
                  }
              }
          });
        //监听提交
        form.on('submit(formDemo)', function(data){
          if($('#Level').val()>5||$('#Level').val()<1){
              layer.msg("请您为我们点亮星星")
              return false  ;
          }
          if($('#Content').val().length>500){
              layer.msg("您输入的评论内容过长");
              $('#Content').val($('#Content').val().substring(0,500));
            return false;
          }
          var json = $('#ratFrom').serialize();
          $.ajax({
            type:"post",
              url:"/GoodComment/Comment",
              dataType:"json",
              data:json,
              success:function (res) {
                  if (res.status == "ok") {
                      location.href = "/User/UserOrder";//TODO:跳转到订单页面
                  } else if (res.status == "redirect") {
                      location.href = res.data;
                  } else if (res.status == "error") {
                      layer.msg(res.errorMsg, { icon: 2, time: 1000 });                    
                  } else {
                      layer.msg("失败", { icon: 2, time: 1000 });
                  }
              },error:function () {

              }
          })
          return false;
        });
    });

    layui.use('upload', function(){
        var $ = layui.jquery
        ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
          elem: '#upLoadImg'
          , url: '/GoodComment/Upload' //上传文件路径
          ,before: function(obj){
            //预读本地文件示例，不支持ie8
              obj.preview(function (index, file, result) {
              $('#demo1').attr('src', result); //图片链接（base64）
            });
          }
          , done: function (res) {
              console.log(res);
              if (res.status == "ok") {
                  $('#CommentImg').val(res.data);
                  console.log($('#CommentImg').val());
              } else if (res.status == "redirect") {
                  location.href = res.data;
              } else if (res.status == "error") {
                  layer.msg(res.errorMsg, { icon: 2, time: 1000 });
                  return false;
              } else {
                  layer.msg("失败", { icon: 2, time: 1000 });
                  return false;
              }
          }
          ,error: function(){
            //演示失败状态，并实现重传
            var demoText = $('#demoText');
            demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function(){
              uploadInst.upload();
            });
          }
            ,size: 1024
        });
      });


    </script>
</body>
</html>
